<template>

  <div :style="styles">
    <h1 style="color:Orange">图片标注网站</h1>
    <div style="display: flex;justify-content: center;margin-top: 150px">
      <el-card style="width: 400px">
        <div slot="header" class="clearfix">
          <span>注册</span>
        </div>
        <table>
          <tr>
            <td>用户名</td>
            <td>
              <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
            </td>
          </tr>
          <tr>
            <td>密码</td>
            <td>
              <el-input type="password" @blur="checkPsw()" v-model="user.password" placeholder="请输入密码"></el-input>
            </td>
          </tr>
          <tr>
            <td>确认密码</td>
            <td>
              <el-input type="password" @blur="checkPsw()" v-model="user.vpassword" placeholder="请再次输入密码" ></el-input>
            </td>
          </tr>
          <p v-text="checker.password" style="color: red;font-size: 12px"></p>
          <tr>
            <td>电子邮箱</td>
            <td>
              <el-input type="email" @blur="checkEmail()" v-model="user.email" placeholder="请输入电子邮箱"></el-input>
            </td>
          </tr>
           <p style="color: red;font-size: 12px" v-text="checker.email"></p>
          <tr>
            <!-- 占两行-->
            <td colspan="2">
              <!-- 点击事件的两种不同的写法v-on:click和 @click-->
              <el-button style="width: 50%" type="primary" :disabled="this.checker.isValid?false:true" @click="doRegister()">注册</el-button>
            </td>
          </tr>
          <router-link to="/LoginPage">
          <el-link type="primary">已经有账号了？去登录</el-link>
        </router-link>
        </table>


        <span style="color: red;font-size: 12px" v-text="this.errorMsg.content"></span>
      </el-card>

    </div>
  </div>
</template>
<script>
import picture from '@/assets/background.jpg'
import axios from "axios";
// 获取token，暂不用
// axios.get('/api/home/token/').then(function (res){
//  let csrf_token = getCookie('csrftoken')
//   console.log(csrf_token)
//  window.sessionStorage.setItem("csrf_token", csrf_token)
// })
  export default {
    name: 'Register',
    data() {
      return{
        user:{
          username:'',
          password:'',
          vpassword:'',
          email: '',
        },
        checker:{
          password:'',
          email:'',
          isValid:false
        },
        errorMsg:{
          content:''
        },
        styles: {
            width:"100%",
            height:"100%",
            backgroundImage:`url(${picture})`,
            position: 'absolute',
            top: '0%',
            left: '0%',
        }
      }
    },
    methods:{
        doRegister(){
          if (this.user.username == "" || this.user.password == "")
          {
            this.$alert("存在空输入！请填写完整后提交")
            return
          }
          if (this.checker.isValid == false)
            {
             this.$alert("密码不符合要求，请检查后重试"
             )
            return
          }
            axios.post('http://127.0.0.1:8000/user/register/',
              {
                id:this.user.username,
                password:this.user.password,
                email:this.user.email
              }
            ).then((response) =>{
                console.log(response.data.message)
                let str = response.data.message
                let rescode = response.data.code
                if (response.data.code === 200)
                {
                  this.$alert('注册成功，现在将跳转到登录界面', '成功', {
                  confirmButtonText: '确定'})
                  this.errorMsg.content="注册成功"
                  this.$router.push({path:"/LoginPage"})
                }
                else {
                  this.errorMsg.content=str
                }
              })
              // .catch(()=>
              // {
              //   this.errorMsg.content="服务器内部错误"
              // })
        },
        checkPsw(){
          console.log(this.user.vpassword)
          if (this.user.password !== this.user.vpassword)
          {
            this.checker.password = "两次输入密码不一致!"
            this.checker.isValid=false
          }

          else if (this.user.password.length < 6)
          {
            this.checker.isValid=false
            this.checker.password = "密码长度小于6字节"
          }
          else {
             this.checker.password = ''
             this.checker.isValid = true
          }
        },
        checkEmail(){
          if (/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.]){1,2}[A-Za-z\d]{2,5}$/g.test(this.user.email))
          {
            this.checker.email = ''
            this.checker.isValid=true
          }
          else
          {
             this.checker.email = '邮箱格式错误'
             this.checker.isValid=false
          }
        }
    }
  }
</script>
